<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>109_ramTest</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
body{
	padding-left: 20px;
	background: #eee;
}
.main {
	width: 780px;
	background: #fff;
	margin-left: auto;
	margin-right: auto;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
}
.btngroup {
	width: 20%;
	float: left;
	/*margin-left: auto;
	margin-right: auto;*/
}
.tplbtn {
	margin: 0 5px 5px 0;
}
.printBtnDiv {
	width: 20%;
	float: right;
}
/*
.edui-editor {
	border:0 !important;
}
.edui-default{
	border:0 !important;
}
.edui-editor .edui-default{
	border:0 !important;
}*/
/* edui-editor-toolbarbox edui-default */
/*.edui-editor-toolbarbox {
	display: none;
}*/
</style>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js?v=111"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js?v=111"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js?v=111"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/third-party/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    	var ctx = '${pageContext.request.contextPath}';
    	console.log('ctx: ', ctx);
    </script>
</head>
<body>
<h3>Frist Version</h3>
<div class="btngroup" id="btngroup">
</div>
<div class="printBtnDiv">
	<button id="printBtn101">打印</button>
</div>
<div class="main">
	<!--
		* http://www.css88.com/book/css/rules/!important.htm
		* !important 参考手册 
	 -->
    <script id="editor" type="text/plain" style="width:700px;height:800px;margin-left:auto;margin-right:auto;border:0 !important;"></script>
</div>


<script type="text/javascript">
	
	var _ctx = "${pageContext.request.contextPath}";

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    /* var ue = UE.getEditor('editor'); */
    var ue = UE.getEditor('editor', {wordCount:false,elementPathEnabled:false});
    
    $(function(){
    	/*
    	 * funcLoadTpl
    	 * 被按钮调用,用来加载模板
    	 */
    	var funcLoadTpl = function(tplName, id){
    		if(tplName){
    			$('#'+id).attr('disabled', 'disabled');
    			$.ajax({
        			type: 'POST',
        			url: _ctx + '/my/fetchOneTplByName',
        			data: {"tplName": tplName},
        			success: function(_data){
        				if(_data){
        					var isAppendTo = false;
        					// 插入内容前,先清空编辑器
        					UE.getEditor('editor').setContent('', isAppendTo);
        					UE.getEditor('editor').execCommand('insertHtml', _data);
        				}
        				$('#'+id).removeAttr('disabled');
        			},
        			error: function(_data){
        				console.log(_data);
        				$('#'+id).removeAttr('disabled');
        			}
        		});
    		}
    	};
    	$.ajax({
			type: 'POST',
			url: _ctx + '/my/fetchAllTpls',
			data: {},
			success: function(_data){
				if(_data){
					//TODO: 
					var tpl = "<option value='{1}'>{1}</option>";
					var btnTpl = '<input class="tplbtn" type="button" id="{1}" value="{2}">';
					$.each(_data, function(i,n){
						/**
						 * http://www.w3school.com.cn/jsref/jsref_replace.asp
						 * `replace`的用法见上面网址的介绍
						 */
						var btn = btnTpl.replace(/\{1\}/g, 'tplbtn_'+i).replace(/\{2\}/g, n);
						$(btn).appendTo( $('#btngroup') );
						$('#tplbtn_'+i).on('click', function(){
							funcLoadTpl(n, 'tplbtn_'+i);
						});
					});
				}
			},
			error: function(_data){
				console.log(_data);
			}
		});
    });
    
    /**
     * Questions: 2018年2月9日
     * `$(waitDivHtml).appendTo('body');` : 没效果,以后再研究下为什么吧! 
     * (初步认为是这个jQ API只写入了最外层的div,内层的没写入)
     * 
     */
    var waitDivHtml = '<div id="waitDiv" style="display:none;">';
    	+ '<div style="position:fixed;top:0;left:0;right:0;bottom:0;background:#ccc;z-index:9998;opacity:0.5;"></div>'
    	+ '<div style="position:fixed;width:40%;height:20%;top:40%;left:30%;z-index:9999;opacity:1;background:#00CC99;color:#fff;border-radius:10px;">'
    	+ '<div style="text-align:center;width:100%;margin-top:10%;">处理中,请稍候...</div>'
    	+ '</div></div>';

    /**
     * 前台等待时的提示信息
     */
    var funcPleaseWait = (function(){
    	return {
    		'show': function(){
    			if($('#waitDiv')[0]){
    				$('#waitDiv').css('display', 'block');
    	    	}else{
    	    		$(waitDivHtml).appendTo('body');
    	    		setTimeout(function(){
        				$('#waitDiv').css('display', 'block');
        			},10);
    	    	}
    		},
    		'hide': function(){
    			$('#waitDiv').css('display', 'none');
    		}
    	};
    })();
    
    /**
     * 把后台传递过来的html写入到iframe中,并调用打印
     */
    function createIframeAndPrint(htmlStr){
    	var $ifr_00 = $('#ifr_00');
		if($ifr_00[0]){
			$ifr_00.remove();
		}
		var tplIfr = '<iframe id="ifr_00" style="width:0;height:0;padding:0;margin:0;position:absolute;left;0;top:0;"></iframe>';
		$('body').append( tplIfr );
		
		setTimeout(function(){
			$ifr_00 = $('#ifr_00');
			if($ifr_00[0]){
				var _ifr = $ifr_00[0];
				var _doc = _ifr.contentWindow.document;
				
				_doc.open();
				_doc.write( htmlStr );
				_doc.write( '<script type="text\/javascript">window.onload=function(){window.print();};<\/script>' );
				
				_doc.close();
			}
		},1);
    }
    
    //Add by 2018年2月9日
    $(function(){
    	$('#printBtn101').on('click', function(){
    		funcPleaseWait.show();
        	var htmlStr = "";
        	htmlStr += $('head', ue.iframe.contentWindow.document)[0].outerHTML;
        	htmlStr += $('body', ue.iframe.contentWindow.document)[0].outerHTML;
        	// console.log( htmlStr );
        	$.ajax({
        		type: 'POST',
        		url: ctx+'/ram/test',
        		data: {'htmlStr':htmlStr},
        		dataType: 'json',
        		success: function(_data){
        			if(_data.flag == 'true'){
        				//
        				// console.log( _data.printHtml );
        				createIframeAndPrint( _data.printHtml );
        			}
        			
        			funcPleaseWait.hide();
        		},
        		error: function(_data){
        			console.log( _data );
        			funcPleaseWait.hide();
        		}
        	});
    	});
    });
</script>
<!-- 前台等待: 参考《CSS权威指南(中文第三版)》第10章 浮动和定位 P309 -->
<div id="waitDiv" style="display:none;">
	<div style="position:fixed;top:0;left:0;right:0;bottom:0;background:#ccc;z-index:9998;opacity:0.5;"></div>
	<div style="position:fixed;width:40%;height:20%;top:40%;left:30%;z-index:9999;opacity:1;background:#00CC99;color:#fff;border-radius:10px;">
		<div style="text-align:center;width:100%;margin-top:10%;">处理中,请稍候...</div>
	</div>
</div>
</body>
</html>